<template>
  <div class="app-container">
    <div class="flower-petals" id="petalsContainer"></div>
  </div>
</template>

<script lang="ts" setup name="littleSup">
import { nextTick, ref } from 'vue'
const petalsContainer = ref()
nextTick(() => {
  petalsContainer.value = document.getElementById('petalsContainer') as any
  console.log(petalsContainer.value)
})

// 创建花瓣
function createPetal() {
  const petal = document.createElement('div')
  petal.className = 'flower-petal'

  // 设置花瓣的初始位置
  petal.style.left = Math.random() * window.innerWidth + 'px'
  petal.style.top = '0px'
  // 添加到容器
  petalsContainer.value.appendChild(petal)

  // 动画
  dropPetal(petal)
}

// 花瓣下落
function dropPetal(petal: any) {
  const fallTime = Math.random() * 3 + 2 // 随机下落时间
  petal.style.transition = `transform ${fallTime}s linear, opacity ${fallTime}s linear`

  requestAnimationFrame(() => {
    petal.style.transform = `translateY(${window.innerHeight}px)`
    petal.style.opacity = '0'
  })

  // 动画完成后移除花瓣
  petal.addEventListener('transitionend', () => {
    petal.remove()
  })
}

// 每500毫秒生成一片花瓣
setInterval(createPetal, 500)
</script>
<style>
body {
  background-color: #87ceeb; /* 背景色 */
  overflow: hidden; /* 隐藏溢出的内容 */
  margin: 0;
  height: 100vh; /* 满屏高度 */
}

.flower-petal {
  position: absolute;
  width: 20px; /* 花瓣的宽度 */
  height: 20px; /* 花瓣的高度 */
  background-color: pink; /* 花瓣颜色 */
  opacity: 0.8; /* 透明度 */
  border-radius: 10px; /* 圆角 */
  will-change: transform, opacity; /* 提升性能 */
}
</style>
